<template>
  <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
    <el-form :model="form" name="el-form-goods-category-edit-name" id="el-form-goods-category-edit-id">
      <el-form-item label="名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" name="username" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="商品编码" :label-width="formLabelWidth">
        <el-input v-model="form.code"  name="password" autocomplete="off"></el-input>
      </el-form-item>


      <el-form-item label="所属类别" :label-width="formLabelWidth">
        <el-select v-model="form.categoryName" style="width: 100%" placeholder="所属类别" @change="_categoryNameChange">
          <el-option v-for="item in categoryNameList" :key="item.id" :label="item.name" :value="item"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="供应商" :label-width="formLabelWidth">
        <el-select v-model="form.supplier" style="width: 100%" placeholder="供应商" @change="_supplierChange">
          <el-option v-for="item in supplierNameList" :key="item.id" :label="item.name" :value="item"></el-option>
        </el-select>
      </el-form-item>



      <el-form-item label="规格型号" :label-width="formLabelWidth">
        <el-input v-model="form.model"  name="model" autocomplete="off"></el-input>
      </el-form-item>



      <el-form-item label="商品描述" :label-width="formLabelWidth">
        <el-input v-model="form.summary"  name="summary" autocomplete="off"></el-input>
      </el-form-item>



      <el-form-item label="商品单价" :label-width="formLabelWidth">
        <el-input v-model="form.price"  name="price" autocomplete="off"></el-input>
      </el-form-item>



      <el-form-item label="安全存量" :label-width="formLabelWidth">
        <el-input v-model="form.safeNum"  name="safeNum" autocomplete="off"></el-input>
      </el-form-item>


      <el-form-item label="单位" :label-width="formLabelWidth">
        <el-input v-model="form.unit"  name="unit" autocomplete="off"></el-input>
      </el-form-item>











    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="_ok">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

    export default {

        name: "SysUserEdit",
      data(){
          return{

            formAdd:{
              name:'',
              code:'',
              categoryName:'',
              categoryId:'',
              model:'',
              summary:'',
              price:'',
              safeNum:'',
              unit:'',
              supplier:'',
              supplierId:'',
            },
            form:{
              categoryName:'',
              categoryId:'',
              name:'',
              code:'',
              model:'',
              summary:'',
              price:'',
              safeNum:'',
              unit:'',
              supplier:'',
              supplierId:'',
            },
            dialogFormVisible: false,

            formLabelWidth: '120px',

            categoryNameList:[],
            supplierNameList:[],
          }
      },
      methods:{

          _open(obj){

            if (undefined===obj){

              this.form= JSON.parse(JSON.stringify(this.formAdd));;
              console.log('-----formAdd------',this.formAdd)
              this.dialogFormVisible=true;
            }else{
              this.form=obj;
              this.dialogFormVisible=true;
            }
            this._listCategory();
            this._listSupplier();

          },


        _supplierChange(data){
            this.form.supplier=data.name;
            this.form.supplierId=data.id;
        },

        _categoryNameChange(data){
          this.form.categoryName=data.name;
          this.form.categoryId=data.id;
        },



        _listCategory(){
          this.$http.get('/t_category/list_category').then(res=>{
            this.categoryNameList=res.data.data;
          }).catch(err=>{

          });
        },


        _listSupplier(){
          this.$http.get('/t_supplier/list_supplier').then(res=>{
            this.supplierNameList=res.data.data;
          }).catch(err=>{

          });
        },

          _ok(){
            let userData= this.form;
            if (undefined === userData.id){
              this.$http.post('/t_product/add',JSON.stringify(userData)).then(res=>{

                console.log('res----------------',res)

                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
                this.$emit('on-result-change')
                this.dialogFormVisible = false;

              }).catch(err=>{
                this.$message({
                  type: 'info',
                  message: '添加失败'
                });
              })

            } else {
              this.$http.put('/t_product/'+userData.id,userData).then(res=>{
                this.$message({
                  type: 'success',
                  message: '编辑成功!'
                });
                this.$emit('on-result-change')
                this.dialogFormVisible = false;

              }).catch(err=>{
                this.$message({
                  type: 'info',
                  message: '编辑失败'
                });
              })
            }




          }

      },
    }
</script>

<style scoped>

</style>
